<template>
  <div style="height: 100%;background-color:white ;padding: 5px">
    <div>
      <div style="display: inline-block">
        <el-button icon="el-icon-back" size="small" type="text" @click="goBack">返回</el-button>
      </div>
      <div style="display: inline-block">|</div>
      <div style="display: inline-block;">
        <div style="padding-bottom: 15px;margin-left:10px">
          <span style=" font-family: 'Microsoft YaHei',serif;display: inline-block">回收站</span>
        </div>
      </div>
    </div>
    <div style="margin-bottom: 10px;">
      <el-row>
        <el-col :span="2">
          <el-button size="small"
                     type="success"
                     @click="recoveryKnowledge">恢复知识
          </el-button>
        </el-col>
        <el-col :span="4">
          <el-button size="small"
                     type="success"
                     @click="emptyTrash">清空回收站
          </el-button>
        </el-col>
        <el-col :span="18">
          <div>
            <div style="width: 430px; float: right">
              <el-input v-model="name"
                        placeholder="请输入名称"
                        @keyup.enter.native="searchEnterFun($event)">
                <i class="el-input__icon el-icon-search"
                   slot="prefix"></i>
                <el-button :icon="appendIcon"
                           slot="append"
                           v-on:click="switchAppend"></el-button>
              </el-input>
            </div>
            <div id="advance"
                 style="padding: 10px; float: right;"
                 v-if="showAdvance">
              <div>
                <div style="margin-top: 20px; display: flex;">
                  <div class="advancedSearchLabel">操作人</div>
                  <div style="width: 217px">
                    <el-input v-model="updatedBy"
                              placeholder="请输入操作人"></el-input>
                  </div>
                </div>
              </div>
              <div>
                <div style="margin-top: 10px; display: flex;">
                  <div class="advancedSearchLabel">删除日期</div>
                  <div>
                    <el-date-picker
                      v-model="updatedTime"
                      @change="dateChange"
                      type="daterange"
                      range-separator="至"
                      start-placeholder="开始日期"
                      end-placeholder="结束日期"
                      value-format=" yyyy-MM-dd" format="yyyy-MM-dd"
                      style="width: 240px;">
                    </el-date-picker>
                  </div>
                </div>
              </div>
              <div v-if="drugInfoLibStatus === 'true'">
                <div style="margin-top: 20px; display: flex;">
                  <div class="advancedSearchLabel">厂家</div>
                  <div style="width: 217px">
                    <el-input v-model="drugInfoLibCompany"
                              placeholder="请输入厂家"></el-input>
                  </div>
                </div>
              </div>
              <div style="margin-top: 30px; right: 10px;">
                <el-row>
                  <el-col :offset="6" :span="6">
                    <div style="margin-left: 90px;height: 32px; width: 88px;">
                      <el-button size="small" v-on:click="advanceCancel">取 消</el-button>
                    </div>
                  </el-col>
                  <el-col :offset="2" :span="2">
                    <div style="margin-left: 30px;height: 32px; width: 88px;">
                      <el-button size="small" v-on:click="reset">重置</el-button>
                    </div>
                  </el-col>
                  <el-col :offset="2" :span="2">
                    <div div style="margin-left: 30px;height: 32px; width: 88px;">
                      <el-button size="small" type="success" v-on:click="advanceConfirm">确 定</el-button>
                    </div>
                  </el-col>
                </el-row>
              </div>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
    <el-row>
      <el-table ref="table" :data="recycleTableData" :height="tableHeight" :row-key="getRowkeys" border border
                highlight-current-row
                stripe style="width: 100%;"
                @selection-change="handleSelectionChange">
        <el-table-column
          v-model="multipleSelection"
          :reserve-selection="true"
          type="selection"
          width="55">
        </el-table-column>
        <el-table-column label="知识名称" min-width="320" prop="name">
          <template slot-scope="scope">
            <span v-html="scope.row.name"></span>
          </template>
        </el-table-column>
        <el-table-column v-if="drugInfoLibStatus === 'true'"
                         label="厂家"
                         min-width="100" prop="drugInfoLibCompany"
                         show-overflow-tooltip></el-table-column>
        <el-table-column v-if="drugInfoLibStatus === 'true'"
                         label="来源"
                         min-width="100" prop="drugInfoLibSource"
                         show-overflow-tooltip></el-table-column>
        <el-table-column label="版本号" min-width="60" prop="version"></el-table-column>
        <el-table-column label="操作人" min-width="140" prop="updatedBy">
          <template slot-scope="scope">
            <span v-html="UTIL.getNameByUserName(scope.row.updatedBy)"></span>
          </template>
        </el-table-column>
        <el-table-column :formatter="dateFormat" label="删除时间" min-width="160" prop="updatedTime"></el-table-column>
        <el-table-column label="操作" min-width="150">
          <template slot-scope="scope">
            <span><el-link type="primary" @click.prevent="queryDetail(scope.row.id)">详情</el-link></span>
            <span><el-link type="primary" @click.prevent="recover(scope.row.id)">恢复</el-link></span>
            <span><el-link type="danger" @click.prevent="thoroughDel(scope.row.id)">彻底删除</el-link></span>
          </template>
        </el-table-column>
      </el-table>
    </el-row>
    <el-row>
      <el-pagination v-if="multiplePages" :page-size="pageSize" :total="totalNum" background
                     layout="total, prev, pager, next, jumper" style="text-align: right;margin-top: 5px;"
                     @current-change="handleCurrentChange"></el-pagination>
    </el-row>
  </div>
</template>

<script>
import moment from "moment";

export default {
  name: "Recycle",
  data() {
    return {
      recycleTableData: [],
      totalNum: 0,
      currentPage: 0, // 第几页
      pageSize: 10, // 每页显示的数据个数
      multiplePages: true,
      tableHeight: '',
      appendIcon: "el-icon-caret-bottom",
      showAdvance: false,
      updatedTime: '',
      name: '',
      updatedBy: '',
      multipleSelection: [],
      multipleSelectionAll: [],
      drugInfoLibStatus: this.$route.query.drugInfoLibStatus,
      drugInfoLibCompany: ''
    }
  },
  methods: {
    dateFormat: function (row, column) {
      const date = row[column.property]
      if (date == undefined) {
        return ''
      }
      return moment(date).format("YYYY-MM-DD  HH:mm:ss")
    },
    handleCurrentChange: function (val) {
      this.currentPage = val - 1;
      this.getTableData();
    },
    queryDetail: function (id) {
      this.$store.commit('setKnowledgeDetailId', id)
      this.$store.commit('setKnowledgeDetailStatus', 'published')
      this.$store.commit('showKnowledgeDetail')
    },
    goBack: function () {
      this.$router.go(-1)
    },
    recover: function (id) {
      this.recoverKnowledge(id, "是否恢复");
    },
    recoveryKnowledge: function () {
      if (this.multipleSelection.length == 0) {
        this.$message.warning("请最少选中一条知识");
        return;
      }
      this.recoverKnowledge(this.multipleSelection.toString(), "是否恢复被选中知识？");
    },
    recoverKnowledge: function (val, tips) {
      this.$confirm(tips, '提示', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.axios.get('/pmph/action/knowledgeLib/recoverReleasedKnowledge', {
          params: {
            ids: val
          }
        }).then(() => {
          this.getTableData()
        })
      })
    },
    getTableData: function () {
      this.axios.get('/pmph/action/knowledgeLib/selectDelData', {
        params: {
          currentPage: this.currentPage,
          pageNum: this.pageSize,
          knowledgeLibId: this.$route.query.id,
          name: this.name,
          updatedTime: this.updatedTime.toString(),
          updatedBy: this.updatedBy,
          drugInfoLibCompany: this.drugInfoLibCompany
        }
      }).then((response) => {
        this.noData = response.data.total <= 0;
        this.recycleTableData = response.data.records;
        this.totalNum = response.data.total;
      }).catch((error) => {
        console.error(error);
        this.recycleTableData = [];
        this.noData = true;
        this.$message.error("未能请求到数据");
      })
    },
    searchEnterFun(e) {
      const keyCode = window.event ? e.keyCode : e.which;
      console.log("回车搜索", keyCode, e);
      if (keyCode === 13) {
        this.currentPage = 0;
        this.getTableData();
      }
    },
    emptyTrash: function () {
      this.delKnowledge('', 'all', '此操作将彻底删除知识，操作不可逆，请确认是否要清空所有删除知识？');
    },
    thoroughDel: function (id) {
      this.delKnowledge(id, 'single', '您要彻底删除该知识？');
    },
    delKnowledge: function (val, operationType, tips) {
      this.$confirm(tips, '提示', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.axios.get('/pmph/action/knowledgeLib/deleteReleasedKnowledge', {
          params: {
            id: val,
            operationType: operationType,
            knowledgeLibId: this.$route.query.id,
            name: this.name,
            updatedTime: this.updatedTime.toString(),
            updatedBy: this.updatedBy
          }
        }).then(() => {
          this.getTableData()
        })
      })
    },
    switchAppend: function () {
      if (this.showAdvance) {
        this.showAdvance = false;
        this.appendIcon = "el-icon-caret-bottom";
      } else {
        this.showAdvance = true;
        this.appendIcon = "el-icon-caret-top";
      }
    },
    advanceCancel: function () {
      this.showAdvance = false;
    },
    reset: function () {
      this.name = '';
      this.updatedTime = '';
      this.updatedBy = '';
      this.drugInfoLibCompany = '';
    },
    advanceConfirm: function () {
      this.currentPage = 0;
      this.showAdvance = false;
      this.getTableData();
    },
    dateChange(val) {
      this.updatedTime = val;
    },
    getRowkeys(row) {
      return row.id;
    },
    //复选框选中事件
    handleSelectionChange(selection) {
      for (let i = 0; i < selection.length; i++) {
        this.multipleSelection.push(selection[i].id)
      }
      console.log(this.multipleSelection.toString());
    }
  },

  mounted() {
    this.getTableData();
  },
  created() {
    this.tableHeight = CONST.WORKSPACE_HEIGHT - 160;
  }
}
</script>

<style scoped>

</style>
